<template>
  <div class="statistics-wrapper">
    <div class="statistics-header clearfix">
      <span @click="selectYear">{{currentYearName}}<i class="el-icon-caret-bottom"></i></span>
      <span @click="selectSeason">{{currentSeasonName}}<i class="el-icon-caret-bottom"></i></span>
    </div>
    <div class="statistics-data">
      <el-table
      :data="tableData"
      style="width: 100%;"
      row-key="statisticsDepartmentId"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="statisticsDepartmentName"
        label="部门/岗位"
        fixed
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="totalAmount"
        label="Kr总数"
        min-width="65">
      </el-table-column>
      <el-table-column
        prop="completeAmount"
        label="Kr完成数"
        min-width="80">
      </el-table-column>
      <el-table-column
        prop="completePercent"
        label="Kr完成百分比"
        min-width="140">
        <template slot-scope="scope">
          {{scope.row.completePercent? scope.row.completePercent + '%': '0%'}}
        </template>
      </el-table-column>
    </el-table>
  </div>
  </div>
</template>

<script>
import {dateUtil} from '@/utils/dateUtil'
import dingMixin from  '@/mixins/ding'

export default {
  data() {
    return {
      tableData: [],
      yearArr: [],
      seasonArr: [{
        value: `0201`,
        key: '第1季度LKR'
      },{
        value: `0202`,
        key: '第2季度LKR'
      },{
        value: `0203`,
        key: '第3季度LKR'
      },{
        value: `0204`,
        key: '第4季度LKR'
      },{
        value: `0200`,
        key: '年度LKR'
      }],
      currentYear: '',
      currentYearName: '',
      currentSeason: '',
      currentSeasonName: ''
    }
  },
  async mounted() {
    this.setTimeArr();
    this.getData();
  },
  mixins: [dingMixin],
  methods: {
    async getData() {
      this.tableData = await this.$httpN.postB('lkr/lkrstatistics/list', {
        departmentBelongId: '',
        goalPeriodYear: this.currentYear,
        goalPeriodTime: this.currentSeason
      })

      if(this.tableData.length > 0) {
        this.tableData.forEach((data) => {
          this.getNextLevel(data)
        })
      }
    },
    selectYear() {
      this.mobileChosen(this.yearArr, this.currentYearName,(data) => {
        this.currentYear = data.value;
        this.currentYearName = data.key;
        this.getData(true)
      })
    },
    selectSeason() {
      this.mobileChosen(this.seasonArr, this.currentSeasonName,(data) => {
        this.currentSeason = data.value;
        this.currentSeasonName = data.key;
        this.getData(true)
      })
    },
    setTimeArr() {
      let year = parseInt((new Date).Format(`yyyy`));
      this.currentYear = `${year}`
      this.currentYearName = `${year}年`
      this.currentSeason = `02${(new Date).Format(`qq`)}`
      this.currentSeasonName = `第${(new Date).Format(`q`)}季度LKR`
      this.yearArr = []
      for (let i=-5; i<=5; i++) {
        this.yearArr.push({
          value: `${year-i}`,
          key: `${year-i}年`
        })
      }
    },
    async getNextLevel(data) {
      let result = await this.$httpN.postB('lkr/lkrstatistics/list', {
        departmentBelongId: data.statisticsDepartmentId,
        goalPeriodYear: this.currentYear,
        goalPeriodTime: this.currentSeason
      })
      if(result.length > 0) {
        this.$set(data, 'children', result);
        result.forEach(element => {
          this.getNextLevel(element)
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-wrapper{
  min-height: 100vh;
  background: #F6F6F6;
}
.statistics-header{
  line-height: 46px;
  background: white;
  font-weight: bold;
  padding: 0 16px;
  .search-bar{
    float:right;
    >i:first-child{
      margin-right: 10px;
    }
  }
}
.statistics-data{
  margin-top: 20px;
  padding: 0 16px;
}
</style>